<template>
	<view>
		<navbar :tip="tip" title="选校热问" :isback="true"></navbar>
		<view class="scroll-container">
			<!-- 滚动内容（实际使用时可用 v-for 动态渲染） -->
			<view class="scroll-content">
				<text class="con__tip" @click="clickgd(item) " v-for="(item,index) in tiplist" :key="index"
					style="width: fit-content;flex-shrink: 0;">
					{{item.context}}
				</text>
				<text class="con__tip" @click="clickgd(item)" v-for="(item,index) in tiplist" :key="index"
					style="width: fit-content;flex-shrink: 0;">
					{{item.context}}
				</text>
			</view>
		</view>
		<scroll-view scroll-y="true" id='box' :style="{height:'calc(100vh - 44px - 110rpx - '+height+' - '+bheight+')'}"
			:scroll-with-animation='true' :scroll-top='scrollTop'>
			<view class="con">
				<view class="con__list" v-if="list.length>0">
					<view class="con__list__item item" v-for="(item,index) in list" :key="index" :id="'text'+index"
						@click="clicktext(item)" :class="item.iscur?'complex-blink':''">
						<view class="u-flex u-flex-y-center" v-if="item.user">
							<image :src="URL(item.user.avatar)" mode="aspectFill" class="con__list__item__avt"></image>
							<view class="" style="flex: 1;">
								<view class="con__list__item__name">
									{{item.user.nickname}}
								</view>
								<view class="con__list__item__time">
									<!-- 2025-2-10 -->
									{{$u.timeFormat(item.user.updated_at, 'yyyy-mm-dd')}}
								</view>
							</view>
							<view class="con__list__item__num">
								<image src="/static/xschool/eye.png" class="con__list__item__num__icon" mode=""></image>
								0
							</view>
						</view>
						<view class="u-flex" style="margin-top: 32rpx;padding: 0 36rpx 0 13rpx;">
							<image src="/static/xschool/Group_29@2x.png" class="con__list__item__wen" mode=""></image>
							<view class="con__list__item__text">
								{{item.context}}
							</view>
						</view>
						<view class="u-flex con__list__item__hd" style="margin-top: 13rpx;">
							<image src="/static/xschool/Group_30@2x.png" class="con__list__item__wen" mode=""></image>
							<view class="con__list__item__text">
								客服：<text v-if="item.comment_like">{{item.comment_like.context}}</text>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
				<u-empty v-else>
				</u-empty>
			</view>
		</scroll-view>
		<view class="footer">
			<!-- <view class="">
				<image src="/static/xschool/Group_2216.png" class="footer__bg" mode=""></image>
				<image src="/static/xschool/Vector.png" class="footer__pic2" mode=""></image>
			</view> -->
			<image src="/static/cxx/Group 2216.png" class="footer__bg" @click="navto('/pages/xschool/release')" mode="">
			</image>
			<image src="/static/cxx/Group 2235.png" class="footer__bg" mode=""></image>
		</view>


	</view>
</template>

<script>
	import school from '@/api/_school.js'
	export default {
		data() {
			return {
				tip: '',
				tiplist: [],
				page1: 1,
				page_size1: 10,
				list: [],
				page: 1,
				page_size: 10,
				total1: 0,
				total: 0,
				status: 'loadmore',
				tiplist1: [],
				query: null,
				timmer: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				boxTop: 0,
				boxheight: 0,
				txtbox: 0
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			clicktext(e) {
				// e.iscur = false
				this.$forceUpdate()
			},
			clickgd(e) {
				clearTimeout(this.timmer)
				let _this = this
				let text = e.context
				let i = null
				this.list.map((t, index) => {
					t.iscur = false
					if (t.context == text) {
						t.iscur = true
						i = index
					}
				})
				this.timmer = setTimeout(() => {
					_this.list.map((t, index) => {
						t.iscur = false
					})
					_this.$forceUpdate()
				}, 4000)
				// 获取节点信息
				console.log(i)
				_this.scrollTop =200
				// let query = uni.createSelectorQuery().in(this);
				// query.select("#box").boundingClientRect(content => {
				// 	_this.boxTop = content.top
				// }).exec();
				// query.selectAll(".item").boundingClientRect(content => {
				// 	// 计算中间位置：内容总高度/2 - 容器高度/2
				// 	console.log(_this.boxTop)
				// 	const scrollTop = content[i].top - _this.boxTop
				// 	_this.scrollTop = _this.old.scrollTop
				// 	_this.$nextTick(function() {
				// 		// _this.scrollTop = 0
				// 	});
				// 	// _this.query=null
				// }).exec();

				this.$forceUpdate()
			},
			async gethotlist() {
				let res = await school.commentslist({
					page: this.page1,
					page_size: this.page_size1
				})
				if (res.data.code == 200) {
					this.tiplist = [...this.tiplist, ...res.data.data.data]
					this.tiplist1 = [...this.tiplist1, ...res.data.data.data]
					this.total1 = res.data.data.pageInfo.total
				}
			},
			async getlikelist() {
				let res = await school.likelist({
					page: this.page,
					page_size: this.page_size
				})
				if (res.data.code == 200) {
					this.list = [...this.list, ...res.data.data.data]
					this.total = res.data.data.pageInfo.total
					if (this.list.length == this.total) this.status = 'nomore';
				}
			},
			scrolltolower() {
				if (this.list.length == this.total) {
					return
				}
				this.status = 'loading';
				this.page++
				this.getlist()
			},
		},
		onShow() {
			this.page = 1
			this.page1 = 1
			this.total = 0
			this.total1 = 0
			this.status = 'loadmore'
			this.list = []
			this.tiplist = []
			this.gethotlist()
			this.getlikelist()
		},
		onUnload() {
			clearTimeout(this.timmer)
		},
		mounted() {
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_3120.png') 100% no-repeat;
		background-position: top;
		background-color: #f2f8fd;
		width: 750rpx;
	}

	.con {
		padding: 0 26rpx 17rpx;

		&__tip {
			padding: 0 36rpx;
			height: 57rpx;
			background: #FFFFFF;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #000000;
			line-height: 57rpx;
			margin: 0 28rpx 30rpx 0;
			display: inline-block;
		}

		&__list {
			padding-top: 8rpx;

			&__item {
				background: #FFFFFF;
				border-radius: 57rpx 57rpx 57rpx 57rpx;
				margin-bottom: 19rpx;
				padding: 24rpx 19rpx;

				&__avt {
					width: 63rpx;
					height: 63rpx;
					background: #D9D9D9;
					border-radius: 50%;
					margin-right: 14rpx;
				}

				&__name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 27rpx;
					color: #000000;
					line-height: 40rpx;
					padding-top: 10rpx;
				}

				&__time {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 19rpx;
					color: #999999;
					line-height: 40rpx;
					margin-top: -7rpx;
				}

				&__num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 19rpx;
					color: #C0BEBE;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 148rpx;
					align-self: flex-end;
					margin-bottom: 9rpx;

					&__icon {
						width: 24.81rpx;
						height: 19.08rpx;
						margin-right: 10rpx;
					}
				}

				&__wen {
					width: 41.98rpx;
					height: 40.08rpx;
					margin-right: 11rpx;
					flex-shrink: 0;
				}

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #000000;
					line-height: 40rpx;
				}

				&__hd {
					padding: 24rpx 36rpx 20rpx 13rpx;
					background: #E8F7FF;
					border-radius: 46rpx 46rpx 46rpx 46rpx;
				}

			}
		}
	}

	.footer {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;

		&__bg {
			width: 91.6rpx;
			height: 91.6rpx;
			margin-bottom: 9rpx;
			position: relative;

		}

		&__pic {
			width: 91.6rpx;
			height: 91.6rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__pic2 {
			width: 28.63rpx;
			height: 28.63rpx;
			position: absolute;
			top: 18rpx;
			left: 32rpx;
		}
	}

	.scroll-container {
		width: 100%;
		overflow: hidden;
		/* 隐藏溢出内容 */
		white-space: nowrap;
		/* 禁止换行 */
		padding-top: 20rpx;
	}

	.scroll-content {
		display: inline-block;
		animation: scroll 20s linear infinite;
		/* 动画控制 */
	}

	.scroll-item {
		display: inline-block;
		margin-right: 40px;
		/* 文字间距 */
	}

	/* 关键帧动画 */
	@keyframes scroll {
		0% {
			transform: translateX(0);
			/* 初始位置 */
		}

		100% {
			transform: translateX(-50%);
			/* 移动总宽度的一半 */
		}
	}

	// .scroll-content:hover {
	//   animation-play-state: paused;
	// }
	.complex-blink {
		animation: complex-blink 2s;
		animation-iteration-count: 2;
	}

	@keyframes complex-blink {

		0%,
		35%,
		65%,
		100% {
			opacity: 1;
		}

		/* 保持显示 */
		50%,
		80% {
			opacity: 0;
		}

		/* 短暂隐藏 */
	}
</style>